import Slider from "../../common/silder";
import { $, addClass, removeClass} from "../../common/utils";
import {fetchPost} from "../../common/fetch";
import { check } from "../../common/form-check.js";

export default (conf) => {
    let mobileVerifyToken;
    const $registerVerifyWrapper = $("register-verify-wrapper");
    const $mobileInput = $('register-mobile-input');
    const $verifyInput = $('register-verify-input');
    const $verifyBtn = $('register-verify-btn');
    const $mobileForm = $('register-mobile-form');
    const $mobileBtn = $('register-mobile-btn');
    const $verifyMobile = $('register-verify-mobile');
    const $dialog = $('register-verify-dialog');
    const $dialogClose = $('register-verify-dialog-close');

    const slider = new Slider({
        container: $registerVerifyWrapper,
        success: async ($wrapper, $text, offsetArr) => {
            const offsetMsg = offsetArr.join(":");
            let data = await fetchPost("/getMobileVerifyToken",
                {
                    offsetMsg: offsetMsg
                });
            if (data.code === 200){
                mobileVerifyToken = data.mobileVerifyToken;
                addClass($wrapper, "success");
                $text.innerHTML = "验证成功";
            }
            else {
                addClass($wrapper, "failed");
                $text.innerHTML = "验证失败";
            }
            $verifyBtn.removeAttribute("disabled");
            removeClass($verifyBtn, "disabled");
        }
    });

    $verifyBtn.onclick = async ()=>{
        let checkResult = check($mobileForm);
        console.log(checkResult);
        if (checkResult.length) {
            const type = checkResult[0].type;
            if (type === "present"){
                alert("请填写您的手机号")
            } else if (type === "mobile"){
                alert("请填写正确格式的手机号")
            }
        } else {
           let data = await fetchPost("/register/getVerifyCode",{
              mobile :　$mobileInput.value,
              mobileVerifyToken: mobileVerifyToken,
           });
           if (data.code === 200){
               console.log(data.mobile);
               $dialog.style.display = "block";
               $verifyMobile.innerHTML = data.mobile;
               mobileVerifyToken = "";
               slider.reset();
           } else {
               alert("手机号验证失败");
           }
        }
    };

    /*
    * 验证码长度前端校验
    */
    $verifyInput.oninput = () => {
        const MSGLENGTH = 6;
        let value = $verifyInput.value;
        //过滤非数字输入
        $verifyInput.value = value.replace(/\D/g, '');
        //长度过滤
        if ($verifyInput.value.length > (MSGLENGTH - 1)) {
            $mobileBtn.removeAttribute('disabled');
            removeClass($mobileBtn, 'disabled');
            addClass($mobileBtn, 'btn-primary');
            if (value.length > MSGLENGTH) {
                $verifyInput.value = value.substring(0, MSGLENGTH);
            }
        }
        else {
            removeClass($mobileBtn, 'btn-primary');
            addClass($mobileBtn, 'disabled');
            $mobileBtn.setAttribute('disabled', 'disabled');
        }
    }

    $mobileBtn.onclick = async () => {
        let data = await fetchPost('/register/mobile', {
            mobile: $verifyMobile.innerText,
            verifyCode: $verifyInput.value,
            mobileVerifyToken: mobileVerifyToken,
        });
        if (data.code === 200) {
            conf.success && conf.success();
        }
        else {
            alert('验证码输入错误');
        }
    }
}